<template>
    <v-card ref="cardRef" v-if="props.videoInfo" hover ripple :elevation="2" rounded="lg" class="video-card">
        
        <v-img :src="props.videoInfo.cover?apiFileGet(props.videoInfo.cover):'/not-found.png'" class="align-end card-image"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.6)" height="300px" cover>
            <div class="card-overlay"></div>
            <v-card-text class="text-white pa-0" v-if="!overlay">
                <v-card-actions class="ml-1 mr-1 pa-0">
                    <span class="ma-2 font-weight-bold likes-badge" text-color="white">
                        <v-icon color="#ff6b81" class="mr-1 heart-icon">mdi-heart</v-icon>
                        {{ props.videoInfo.startCount }} 点赞
                    </span>
                    <v-spacer />
                    <v-btn :variant="'tonal'" :density="'comfortable'" class="duration-badge">{{ props.videoInfo.duration }}</v-btn>
                </v-card-actions>
            </v-card-text>
        </v-img>
        <v-card-actions class="card-footer">
            <span class="video-title ml-1 overflow-hidden text-truncate">{{ props.videoInfo.title }}</span>
            <v-spacer></v-spacer>
            <v-btn size="small" color="primary" variant="tonal" v-if="props.videoInfo.user" @click.stop :to="userStore.token?`/user?lookId=${props.videoInfo.user.id}`:''">
                <v-icon size="small" class="mr-1">mdi-account</v-icon>
                {{ props.videoInfo.user.nickName }}
            </v-btn>
        </v-card-actions>
        <v-overlay scrim="black" :model-value="overlay" contained persistent width="100%" style="top:0px" class="video-overlay">
            <v-card color="rgba(26, 27, 37, 0.9)" height="350px" class="overlay-card">
                <v-card-title class="pb-0 overlay-title">
                    <v-icon color="#7C9CBF" class="mr-2">mdi-play-circle</v-icon>
                    播放中
                </v-card-title>
                <div class="px-4 py-2">
                    <v-chip-group class="chip-group">
                        <v-chip v-for="item in props.videoInfo.labelNames.split(',')" 
                            class="label-chip" variant="outlined" color="#7C9CBF" size="small">{{ item }}</v-chip>
                    </v-chip-group>
                </div>
                <v-card-subtitle class="overlay-stats">
                    <v-row>
                        <v-col>
                            <div class="stat-item">
                                <v-icon size="small" color="#A3C4E9" class="mr-1">mdi-eye</v-icon>
                                <span>{{ props.videoInfo.historyCount }} 播放</span>
                            </div>
                        </v-col>
                        <v-col>
                            <div class="stat-item">
                                <v-icon size="small" color="#ff6b81" class="mr-1">mdi-heart</v-icon>
                                <span>{{ props.videoInfo.startCount }} 点赞</span>
                            </div>
                        </v-col>
                        <v-col>
                            <div class="stat-item">
                                <v-icon size="small" color="#feca57" class="mr-1">mdi-star</v-icon>
                                <span>{{ props.videoInfo.favoritesCount||0 }} 收藏</span>
                            </div>
                        </v-col>
                    </v-row>
                </v-card-subtitle>

                <v-card-actions class="pb-0 pt-0 px-4">
                  <v-chip variant="outlined" :density="'compact'" @click="copyUrl()" color="#7C9CBF" class="yv-chip">
                      <v-icon size="small" class="mr-1">mdi-content-copy</v-icon>
                      YV: {{ props.videoInfo.yv }}
                  </v-chip>
                    <v-chip color="orange-lighten-2" variant="text" class="description-toggle"
                        @click="showDescription = !showDescription">
                        描述
                        <v-icon right size="small">{{ showDescription ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
                    </v-chip>
                    <v-spacer></v-spacer>
                </v-card-actions>

                <v-expand-transition>
                    <div v-show="showDescription" class="description-container">
                        <v-divider class="mx-4"></v-divider>
                        <v-card-text class="description-text">
                            {{ props.videoInfo.description || "作者很懒，没有给一点描述" }}
                        </v-card-text>
                    </div>
                </v-expand-transition>
            </v-card>
        </v-overlay>
        <v-snackbar v-model="snackbar.show" :color="snackbar.color" :timeout="2000" class="copy-snackbar">
        {{ snackbar.text }}

        <template v-slot:actions>
          <v-btn color="blue" variant="text" @click="snackbar.show = false">
            了解
          </v-btn>
        </template>
      </v-snackbar>
    </v-card>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { apiFileGet } from '../../apis/file';
import { useUserStore } from '../../stores';
import strUtils from '../../utils/strUtil';
const showDescription = ref(false)
const userStore = useUserStore()
const props = defineProps({
    videoInfo: {
        type: Object,
        default: null
    },
    overlay: {
        type: Boolean,
        default: false
    }
})
const snackbar = ref({
  show: false,
  text: ""
})
const copyUrl = () => {

snackbar.value = {
  text: strUtils.copyContent(props.videoInfo.yv) ? "视频YV号复制成功" : "视频YV号复制失败",
  show: true
}
}
const cardRef = ref()
onMounted(() => {
    showDescription.value = props.overlay
})
watch(() => props.overlay, (e) => {
    showDescription.value = e
    if(e) {
        cardRef.value.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }
})
</script>

<style scoped>
.video-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #1a1b25;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

.card-image {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

.card-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 60%, rgba(26, 27, 37, 0.8) 100%);
  z-index: 1;
}

.video-card:hover .card-image {
  transform: scale(1.05);
}

.heart-icon {
  transition: all 0.3s ease;
}

.likes-badge:hover .heart-icon {
  transform: scale(1.2);
}

.duration-badge {
  background-color: rgba(26, 27, 37, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  color: #fff;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.card-footer {
  background-color: #1a1b25;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px 16px;
}

.video-title {
  color: #e0e0e0;
  font-weight: 500;
  font-size: 1rem;
  max-width: 70%;
  transition: all 0.3s ease;
}

.video-card:hover .video-title {
  color: #A3C4E9;
}

.video-overlay {
  backdrop-filter: blur(5px);
}

.overlay-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

.overlay-title {
  font-weight: 600;
  color: #e0e0e0;
  letter-spacing: 0.5px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chip-group {
  margin: 5px 0;
}

.label-chip {
  margin-right: 5px;
  transition: all 0.3s ease;
}

.label-chip:hover {
  transform: translateY(-2px);
}

.overlay-stats {
  padding: 8px 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
}

.yv-chip {
  transition: all 0.3s ease;
}

.yv-chip:hover {
  transform: scale(1.05);
}

.description-toggle {
  cursor: pointer;
  transition: all 0.3s ease;
}

.description-toggle:hover {
  transform: translateY(-2px);
}

.description-container {
  margin-top: 8px;
}

.description-text {
  color: #a5b1c2;
  font-size: 0.9rem;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
}

.description-text::-webkit-scrollbar {
  width: 4px;
}

.description-text::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.description-text::-webkit-scrollbar-thumb {
  background: rgba(124, 156, 191, 0.3);
  border-radius: 4px;
}

.copy-snackbar {
  backdrop-filter: blur(5px);
}
</style>
